<template>
        <div class="footer">
            <van-tabbar v-model="active">
                <van-tabbar-item icon="wap-home-o" url="#/">首页</van-tabbar-item>
                <van-tabbar-item icon="orders-o" url="#/types">分类</van-tabbar-item>
                <van-tabbar-item icon="video-o" url="#/videos">视频</van-tabbar-item>
                <van-tabbar-item icon="shopping-cart-o" url="#/cart">购物车</van-tabbar-item>
                <van-tabbar-item icon="manager-o" url="#/my">我的</van-tabbar-item>
            </van-tabbar>
        </div>
</template>
<script> 
import Vue from 'vue'; 
// import { Notify } from 'vant';
import { Tabbar, TabbarItem } from 'vant'; 
Vue.use(Tabbar); 
Vue.use(TabbarItem); 
export default { 
    computed:{
        active:{
            get(){
                return this.$store.state.active
            },
            set(val){
                this.$store.commit('changeActive',val)
            }
        }
    }
  }


</script>

<style> 
.van-tabbar{   
    margin: 0 auto; 
    width: 100%; 
}
</style>